<template>
  <el-dialog
    :title="info.isShow ? '添加商品分类' : '编辑商品分类'"
    center
    :before-close="cancel"
    :model-value="info.isShow"
  >
    <el-form :model="cateInfo" :rules="rules" ref="refForm">
      <!-- 选择上级分类 -->
      <el-form-item label="上级分类" label-width="120px" prop="pid">
        <el-select v-model="cateInfo.pid" placeholder="请选择">
          <el-option label="顶级分类" :value="0"></el-option>
          <el-option
            v-for="item in get_cateList"
            :key="item.id"
            :label="item.catename"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- 分类名称 -->
      <el-form-item label="分类名称" label-width="120px" prop="catename">
        <el-input v-model="cateInfo.catename"></el-input>
      </el-form-item>

      <el-form-item label="图片" label-width="120px" v-if="cateInfo.pid != 0">
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :file-list="filelist"
          :on-preview="onpreview"
          :on-remove="onremove"
          :on-change="onchange"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog v-model="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <!-- 状态 -->
      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="cateInfo.status"
          active-color="#13ce66"
          inactive-color="#ccc"
          :active-value="1"
          :inactive-value="2"
        >
        </el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm" v-if="info.isAdd"
          >确 认</el-button
        >
        <el-button type="primary" @click="edit" v-else>编 辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { defineProps,onMounted,computed,ref,reactive,defineEmits  } from 'vue'
import {useStore} from 'vuex'
import {cateadd} from '@/request/api'
const emit = defineEmits(['cancel'])
const info = defineProps(['isShow','isAdd'])
const $store = useStore()

// 文件上传相关
let filelist = reactive([])
let dialogVisible = ref(false) // 是否显示放大
let dialogImageUrl = ref('')  // 放大图片路径
const onpreview = (file)=>{  // 放大
    dialogVisible.value = true
    dialogImageUrl.value = file.url
}
const onremove = ()=>{
    cateInfo.value.img = ''
}

const onchange =(file,fileList)=>{
    // console.log(file,fileList);
    dialogImageUrl.value = file.url
    cateInfo.value.img = file.raw
}
const refForm = ref()
// 添加
const confirm =()=>{
    
    refForm.value.validate(async (val)=>{
        if(!val){
            
            return
        }
        try{
           
            let res = await cateadd(cateInfo.value)
            console.log(res);
            if(res.code == 200){
                ElMessage.success(res.msg)
                action_catelist()
                cancel()
            }else{
                ElMessage.warning(res.msg)
            }

        }catch(err){
            ElMessage.error(err)
        }
    })
}

onMounted(()=>{
    action_catelist()
})
const action_catelist = ()=>{
    $store.dispatch('cate/action_catelist')
}
const get_cateList = computed(()=>{
    return $store.getters['cate/get_catelist']
})
const cateInfo = ref({
    pid:'',  //上级分类编号，顶级分类为0
    catename:'', //商品分类名称
    img:'', //图片(文件，一般用于二级分类)
    status:1, // 状态            1正常2禁用
})
const rules = ref({
    catename:[
        {
            required:true,  // 是否为必填项
            message:'请输用户名',  // 提示信息
            trigger:'blur'  // 触发方式  blur | change
        },
        {
            min:2,max:8,message:'长度在2到8个字符',trigger:'blur'
        }
    ],
    pid:[
        {
            required:true,  // 是否为必填项
            message:'请选择上级分类',  // 提示信息
            trigger:'change'  // 触发方式  blur | change
        }
    ]
})
// 取消
const cancel =()=>{
    emit('cancel')
}
</script>